<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String corpId = (String) request.getAttribute("corpId");
    String corpSecret = (String) request.getAttribute("corpSecret");
%>
<%--<!DOCTYPE html>--%>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>移动端——外部数据控件——选择表格</title>
    <link rel="stylesheet" href="../../css/email/m/jquery.mobile.css"/>
    <link rel="stylesheet" href="../../lib/mui/mui/mui.min.css"/>

    <link rel="stylesheet" href="../../css/email/m/styles.css"/>
    <link rel="stylesheet" href="../../css/email/m/style.css">
    <link rel="stylesheet" href="../../css/email/m/mail.css">
    <script type="text/javascript" src="../../js/notes/jquery-2.1.2.min.js"></script>
    <script type="text/javascript" src="../../js/base/base.js"></script>
    <script type="text/javascript" src="../../lib/mui/mui/mui.min.js"></script>
    <script type="text/javascript" src="../../js/diary/m/simbaJs.js"></script>
    <script src="/js/base/base.js?20190927.1"></script>
    <link rel="stylesheet" href="../../lib/mui/mui/mui.picker.min.css"/>
    <script type="text/javascript" src="../../lib/mui/mui/mui.picker.min.js"></script>
    <style>
        #header {
            background-color: #3984ff;
            box-shadow: 1px 1px 7px rgba(0, 0, 0, .85);
        }

        #header a {
            color: #fff;
        }

        #header h1 {
            color: #fff;
        }

        .ulli {
            margin: 0 20px;
            border-bottom: 1px solid #c8c7cc;
            height: 50px;
            line-height: 58px;
        }

        .nav {
            height: 31px;
            line-height: 28px;
            border: 1px solid #e1dddd;
            border-radius: 10px;
            width: 66%;
            margin-top: 13px;
            margin-right: 27px;
        }

        .nav span {
            width: 48%;
            display: inline-block;
            text-align: center;
        }

        .navc {
            background-color: #00a0e9;
            color: #fff;
            border-radius: 10px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .spanc {
            background-color: #00a0e9;
            width: 40px;
            display: inline-block;
            text-align: center;
            height: 22px;
            line-height: 21px;
            border-radius: 6px;
            color: #fff;
        }

        #yspan, #managerId {
            padding: 4px 10px;
            background-color: #00a0e9;
            color: #fff;
            border-radius: 5px;
            /*margin-left: 14px;*/
        }

        .result, .result1 {
            color: #00a0e9;
            padding-left: 17px;
        }

        .mui-input-row label {
            padding-left: 0;
            font-family: 'microsoft yahei';
            width: 96px;
        }

        .mui-input-row label ~ input {
            float: left;
            padding: 10px 0;
            width: 86%;
        }

        .mui-content {
            height: calc(100% - 45px);
            background: #fff;
        }

        #forms label, #forms1 label, #forms3 label, #forms4 label {
            width: 400px;
        }

        .mui-input-row span {
            float: right;
            line-height: 40px;
        }

        .mui-bar-nav ~ .mui-content {
            height: 100%;
            background: #fff;
            overflow: auto;
        }

        .radio_inline {
            display: inline-block;
            width: 65%;
        }

        .radio_inline label {
            width: 20%;
            padding-left: 40px;
            padding-right: 40px;
        }

        .radio_inline input[type=radio] {
            width: 15%;
            right: auto;
        }

        .must {
            color: red;
        }

        .mui-input-row label {
            padding-left: 64px;
            font-family: 'microsoft yahei';
            width: 150px;
            font-size: 13px;
            margin-top: 0.8rem;
        }

        .table {
            color: #666;
            text-align: center;
        }

        .table th {
            background-repeat: repeat-x;
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body data-role="page">
<div class="mui-content" id="content" style="overflow: auto;">
    <ul>

    </ul>

    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary"  id="add">确认</button>
    </div>
</div>


<script>
    // 获取地址栏参数值
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    $(function () {
        var data = {}; //接口传递的参数
        var url = '';
        var id="DATA_"+getQueryString("id");
        var objstr=[];

        if (getQueryString('type') == 'dataselect') {
            //内部
            var data_table=$("#"+id, window.parent.document).attr('data_table').split(",");
            var table_name=$("#"+id, window.parent.document).attr('data_fld_name');
            var table_data_name=$("#"+id, window.parent.document).attr('data_field');
            var data_control=$("#"+id, window.parent.document).attr('data_control').split(",");
            url = '/TerpServerController/selectapptable';
            data = {
                dName: 'data_' + data_table
            }
        } else if (getQueryString('type') == 'extdataselect') {
            //外部
            var serverId= $("#"+id, window.parent.document).attr('terpid');
            var data_control= $("#"+id, window.parent.document).attr('data_control').split(",");
            var tableName= $("#"+id, window.parent.document).attr('data_table_name');
            var dbDataBaseName= $("#"+id, window.parent.document).attr('data_db_id');
            data = {
                tableName: tableName
                , serverId: serverId
                , dbDataBaseName: dbDataBaseName
            }
            var data_field=$("#"+id, window.parent.document).attr('data_field').split(",")
            var data_fld_name=$("#"+id, window.parent.document).attr('data_fld_name').split(",")
            var table_name='';
            var table_data_name='';
            for(var i=0;i<data_fld_name.length;i++) {
                data_fld_name[i]
                if(data_fld_name[i]!=''){
                    table_name+=data_fld_name[i]+","
                    table_data_name+=data_field[i]+','
                }
            }
            url = "/TerpServerController/selectTerpServer";
            //url = "/TerpServerController/selectapptable";

        }
        $.ajax({
            url: url,
            type: 'get',
            data: data,
            success: function (obj) {
                var dataDataName =table_data_name.split(",");
                var dataName = table_name.split(",");
                var str = '';
                for (var i = 0; i < obj.obj.length; i++) {
                    var strvalue={}; //值
                    var divStr = '';
                    strvalue[data_control[0]]=obj.obj[i][dataDataName[0]]; //定义对象只是为了在取值的时候好取值
                    for (var j = 0; j < dataDataName.length; j++) {
                        if(dataDataName[j]!=''&&j!=0){
                            divStr += ' <tr data_control='+data_control[j]+'">' +
                                ' <td>'+dataName[j]+':</td>' +
                                ' <td style="float: left;">'+ obj.obj[i][dataDataName[j]] +'</td>' +
                                ' </tr>';
                            strvalue[data_control[j]]=obj.obj[i][dataDataName[j]];
                        }
                    }
                    str += '<li class="mui-table-view-cell mui-input-row ">' +
                        ' <label class="mui-left mui-radio">' +
                        ' <input name="radio" value="'+data_control+'" data_value="'+JSON.stringify(strvalue).replace(/"/g, '&quot;')+'" type="radio"  class="rds">' + dataName[0] + ':</label>' +
                        ' <label class="mui-input-clear" style="padding-left: 0;" id="tname" >' + obj.obj[i][dataDataName[0]] + '</label>' +
                        ' <input valuae="" type="hidden" id="reciever"/><span class="mui-icon mui-icon mui-icon-arrowdown popover"  style="margin-top: 8px;" ></span>' +
                        ' <div style="display: none;">' +
                        ' <table width="100%" class="table" id="tablevalue">' + divStr+
                        ' </table>' +
                        ' </div>'+
                        ' </li>';
                }
                $('#content').find('ul').html(str);
                $('.popover').click(function () {
                    $(this).next().toggle();
                });
            }
        });
        $('#add').click(function () {
            var res = getRadioRes('rds');
            if(res.length < 1){
                mui.toast('请选择');
                return;
            }
            var jsonstr=JSON.parse(res);
            for(let key  in jsonstr){
                var dis=$('input[title="'+key+'"]', window.parent.document).attr('disabled');
                if (dis===undefined) { //判断是否是可选字段
                    $('input[title="'+key+'"]', window.parent.document).val(jsonstr[key]);
                }
            }
            window.parent.closeAll()
        })
        function getRadioRes(className){
            var rdsObj = document.getElementsByClassName(className);/*获取值*/
            var checkVal = new Array();
            var k = 0;
            for(i = 0; i< rdsObj.length; i++){
                if(rdsObj[i].checked){
                    checkVal[k] = rdsObj[i].getAttribute('data_value');
                    k++;
                }
            }
            return checkVal;
        }
    })



</script>
</body>
</html>
